<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
{include file="system@block/layui" /}

<div id="box">
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="会员">
     <el-select v-model="form.user_id" filterable placeholder="请选择会员" @change="getProject">
      <el-option v-for="item in users" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
<el-divider content-position="left"><h2>疗程/产品卡</h2></el-divider>
<el-form-item>

<el-table ref="filterTable" :data="productData"  @selection-change="handleSelectionChange" max-height="300">

<el-table-column
      type="selection"

      width="55">
    </el-table-column> 
    <el-table-column
      prop="sn"
      label="订单编号"
      width="180">
      <template slot-scope="scope">
            {{scope.row.sn}}
      </template>
    </el-table-column>
    <el-table-column
      label="疗程/产品卡名称"
      prop="cardname"
      sortable
      :filters="cardnameArr"
      :filter-method="filterHandler"
      width="180">
      <template slot-scope="scope">
            {{scope.row.cardname}}
      </template>
    </el-table-column>


    <el-table-column
      prop="name"
      label="产品名称"
      width="180">
      <template slot-scope="scope">
            {{scope.row.name}}
      </template>
    </el-table-column>
    <el-table-column  
    prop="account"
    label="支付方式"
    width="180"></el-table-column>
    <!-- <el-table-column
      prop="num"
      label="产品数量"
      width="180">
      <template slot-scope="scope">
            {{scope.row.num}}
      </template>
    </el-table-column> -->

</el-table>
</el-form-item>
  <el-form-item label="顾问">
     <el-select v-model="form.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item in adviserArr" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>


  <el-form-item label="美容师">
    <el-select v-model="form.technician_ids" multiple placeholder="请选择美容师">
        <el-option
        v-for="item in technicians"
        :key="item.value"
        :label="item.name"
        :value="item.value">
        </el-option>
    </el-select>
  </el-form-item>

    <el-form-item label="收银">
     <el-select v-model="form.cashier_id" placeholder="请选择收银">
      <el-option v-for="item in cashiers" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>


    <el-form-item label="退款金额">
        <el-input placeholder="0.00" v-model="form.price"> </el-input>
    </el-form-item>

  <el-form-item label="支出账户">
     <el-select v-model="form.account_id" placeholder="请选择支出账户">
      <el-option v-for="item in accountArr" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item >
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>

  </el-form>
</div>


<script>

var vm = new Vue({
	el:'#box',
	data:{
		form:{
			user_id:'',
			multipleSelection:[],
			adviser_id: '',
            cashier_id: '',
            technician_ids: '',
            account_id:'',
            price:0.00,
		},
		productData:[],
		users:{:json_encode($userArr)},
		projectArr:[],
        cardnameArr:[],
		accountArr:{:json_encode($accountArr)},
		adviserArr:{:json_encode($adviserArr)},
        technicians:{:json_encode($technicians)},
        cashiers:{:json_encode($cashiers)},
	},
	methods:{

        filterHandler(value, row, column) {
            // console.log(column);
            const property = column['property'];
            return row[property] === value;
        },
		onSubmit:function(){
			var that = this;
			axios.post('{:url('')}', this.form).then(function (response) {
                if(response.data.status === true){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    that.$message({
                        type: 'success',
                        message: response.data.message,
                        onClose: function(){
                            parent.layer.close(index); //再执行关闭
                            window.parent.location.reload();
                        }
                    })
                }else{
                    that.$message({
                        type: 'error',
                        message: response.data.message
                    })
                }
            }).catch(function (error) {
                that.$message({
                        type: 'error',
                        message: error
                    })
            });
		},
		handleSelectionChange(val) {
	        this.form.multipleSelection = val;
	      },
		getProject:function(){
			var that = this;
            that.cardnameArr = [];
            this.$refs.filterTable.clearFilter();
			axios.get('{:url('getProject')}',{params:{id:that.form.user_id}})
			  .then(function (response) {
			  		if(response.data.length>0){
			  			that.productData = response.data;
                        for (var i = 0; i < response.data.length; i++) {
                                if(that.cardnameArr.length == 0){
                                    that.cardnameArr.push({
                                        text:response.data[i].cardname,
                                        value:response.data[i].cardname
                                    });
                                }else{
                                    var res = that.cardnameArr.some(item => {
                                        if(item.text == response.data[i].cardname){
                                            return true;
                                        }
                                    })
                                    if(!res){
                                        that.cardnameArr.push({
                                            text:response.data[i].cardname,
                                            value:response.data[i].cardname
                                        });
                                    }
                                }
                        }
			  		}else{
			  			that.$message({
			  				type: 'error',
                            message: '暂无疗程卡或已使用完',
			  			})
                        that.productData = []
			  		}

			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		}
	}
})
</script>
